<template>
  <div class="flex">
    <div class="bg-white p-1">
      <div class="text-center">
        <userAvatar :user="info" />
      </div>
      <el-descriptions title="个人信息" :column="1" border style="width: 400px">
        <el-descriptions-item label="用户名" :labelStyle="{'width':'100px'}">{{
            info.name
          }}
        </el-descriptions-item>
        <el-descriptions-item label="账号" :labelStyle="{'width':'100px'}">{{
            info.account
          }}
        </el-descriptions-item>
        <el-descriptions-item label="部门" :labelStyle="{'width':'100px'}">{{
            info.dept.deptName
          }}
        </el-descriptions-item>
        <el-descriptions-item label="角色" :labelStyle="{'width':'100px'}">
          <el-tag :v-if="info.roles && info.roles.length>0" v-for="item in info.roles" :key="item.id" size="small">
            {{ item.roleName }}
          </el-tag>
        </el-descriptions-item>
      </el-descriptions>
    </div>
    <div class="bg-white p-1 ml-1">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>设置</span>
        </div>
        <div>
          <el-tabs v-model="activeName">
            <el-tab-pane label="基本信息" name="first">
              <el-form ref="infoForm" :model="infoForm" :rules="rules" label-width="80px" style="width: 800px">
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="用户名" prop="name">
                      <el-input v-model="infoForm.name" placeholder="请输入用户名"/>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="手机号码" prop="phone">
                      <el-input v-model="infoForm.phone" placeholder="请输入手机号码" maxlength="11"/>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>
              <div>
                <el-button size="small" type="primary" @click="submitForm">确 定</el-button>
              </div>
            </el-tab-pane>
            <el-tab-pane label="修改密码" name="second">
              <el-form ref="pwdForm" :model="pwdForm" :rules="rules" label-width="80px" style="width: 800px">
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="旧密码" prop="oldPassword">
                      <el-input type="password" v-model="pwdForm.oldPassword" placeholder="请输入旧密码" maxlength="11"/>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="新密码" prop="newPassword">
                      <el-input type="password" v-model="pwdForm.newPassword" placeholder="请输入新密码"/>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>
              <div>
                <el-button size="small" type="primary" @click="changePwd">确 定</el-button>
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import {userUpdateCurrentInfo, userChangeCurrentPwd, userCurrentInfo} from "@/api/sys/user";
import {encrypt} from "@/utils/jsencrypt";
import userAvatar from "./userAvatar";
export default {
  name: "UserInfo",
  components: { userAvatar },
  data() {
    return {
      activeName: 'first',
      info: {
        dept: {},
        roles:[]
      },
      // 表单参数
      infoForm: {},
      pwdForm: {},
      // 表单校验
      rules: {
        name: [
          {required: true, message: "用户名不能为空", trigger: "blur"}
        ],
        oldPassword: [
          {required: true, message: "用户密码不能为空", trigger: "blur"}
        ],
        newPassword: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 10, message: '新密码最少10位数哦', trigger: 'blur' },
          {
            trigger: 'blur',
            validator: (rule, value, callback) => {
              var passwordreg = /(?![A-Z]*$)(?![a-z]*$)(?![0-9]*$)(?![^a-zA-Z0-9]*$)/
              if (!passwordreg.test(value)) {
                callback(
                  new Error(
                    '密码必须由大写字母、小写字母、数字、特殊符号中的2种及以上类型组成!'
                  )
                )
              } else {
                callback()
              }
            }
          }
        ],
        // newPassword: [
        //   {required: true, message: "新用户密码不能为空", trigger: "blur"}
        // ],
      }
    }
  },
  created() {
    this.getDetail();
  },
  methods: {
    getDetail() {
      userCurrentInfo().then(res => {
        this.info = res.data;
      })
    },
    changePwd: function () {
      this.$refs["pwdForm"].validate(valid => {
        if (valid) {
          userChangeCurrentPwd({
            oldPassword: encrypt(this.pwdForm.oldPassword),
            newPassword: encrypt(this.pwdForm.newPassword),
          }).then(() => {
            this.msgSuccess("修改成功");
            this.getDetail();
            this.pwdForm = {};
          });
        }
      });
    },
    submitForm: function () {
      this.$refs["infoForm"].validate(valid => {
        if (valid) {
          userUpdateCurrentInfo({
            name: this.infoForm.name,
            phone: this.infoForm.phone,
          }).then(() => {
            this.msgSuccess("修改成功");
            this.getDetail();
            this.infoForm = {};
          });
        }
      });
    },
  }
}
</script>

<style scoped>

</style>
